import React, { useEffect, useState } from 'react'
import './index.scss'
import T from 'prop-types'
import NavBar from '../../../../components/nav-bar'
import del from './images/del.png'
import axios from '../../../../utils/axios'
import lrz from 'lrz'
import { useHistory } from 'react-router-dom'
import {message} from '../../../../components/message'
export default function TextContent(props) {
  const { text } = props
  const [srcArr, setSrcArr] = useState([])
  const [selectId, setSelectId] = useState(0)
  const history = useHistory()
  const List = ['全部', '问答', '交易', '城市', '技术']
  useEffect(() => {
    // getInfo()
  }, [])
  const getImg = (obj) => {
    // 图片，每次只允许上传单个
    if (obj?.target?.files) {
      let files = obj?.target?.files[0]
      if (files?.type.indexOf('image') === 0) {
        let reader = new FileReader() //创建FileReader对象实例reader
        reader.readAsDataURL(files) //将图片url转换为base64码
        reader.onload = function (e) {
          let newUrl = e.target.result
          // 压缩
          lrz(newUrl).then((res) => {
            setSrcArr([...srcArr, res.base64])
          })
        }
      }
    }
  }
  const toDelImg = (i) => {
    // console.log(i)
    setSrcArr((srcArr) => {
      srcArr.splice(i, 1)
      // 如果直接返回srcArr，视图不会更新，返回新数组视图才会更新！！！
      return [...srcArr]
    })
  }
  const handleSubmit = (e) => {
    e.preventDefault()
    // 输入框的文字
    console.log(e.target[1].value)
    // 图片的base64，arr
    console.log(srcArr)
    // 节点：
    console.log(selectId)
    let params = {
      title: e.target[1].value,
      text: e.target[2].value,
      imgArr: srcArr,
      label: selectId,
    }
    if (!params.title) {
      message('标题不能为空')
      return
    }
    if (!params.text) {
      message('内容不能为空')
      return
    }
    console.log(params)
    // 在这里提交给服务器
    axios
      .post('/dynamic/addDynamic', params)
      .then((res) => {
        console.log(res.data)
        if (res.data.code === 0) {
          // 显示弹窗
          message(res.data.data)
          setTimeout(() => {
            history.go(-1)
          }, 1000)
        }
      })
      .then(() => {
        // 返回到上一页
      })
  }
  const UpBtn = <input type="submit" value="发布" className="up-btn"></input>
  return (
    <div className="add-detail">
      <form onChange={getImg} onSubmit={handleSubmit}>
        <NavBar roomName="编辑帖子" right={UpBtn}></NavBar>
        {/* 输入框 */}
        <textarea
          placeholder="取一个好的标题可以吸引更多人"
          className="add-detail-input-title"
          maxLength={'500'}
          minLength={'1'}
        ></textarea>
        <textarea
          placeholder="这里是正文，详细描述你的问题吧"
          className="add-detail-input"
          maxLength={'500'}
          minLength={'1'}
        ></textarea>
        {/* 选择节点 */}
        <div className="add-detail-node">
          <span>选择节点:</span>
          {List.map((item, index) => (
            <div
              className="node-item"
              onClick={() => {
                setSelectId(index)
              }}
              style={{ backgroundColor: selectId === index ? '#a2d5f2' : '' }}
            >
              {item}
            </div>
          ))}
        </div>
        <div className="add-detail-upload">
          {/* 上传图片-最多上传9张 */}
          <div
            className="add-detail-img"
            style={{ backgroundColor: srcArr.length === 9 ? '#f6f6f6' : '' }}
          >
            选择图片
            <input
              disabled={srcArr.length === 9}
              type="file"
              accept="image/*"
              onChange={() => {
                getImg()
              }}
            ></input>
          </div>
          {/* 预览图片 */}
          <div id="selectImg">
            {srcArr?.map((item, index) => (
              <div className="up-img-box" key={index}>
                <img className="up-img" alt="=_=" src={item} />
                <img
                  src={del}
                  className="up-img-del"
                  onClick={() => {
                    toDelImg(index)
                  }}
                  alt="=_="
                />
              </div>
            ))}
          </div>
        </div>
      </form>
    </div>
  )
}

TextContent.propTypes = {
  text: T.string,
}
